<template>
	<view :id="id" :style="{width:width+'px',height:height+'px'}">
		
	</view>
</template>
<script lang="uts">

	export default {
		data() {
			return {
				id: (Date.now()+Math.random()*100).toString(),
				fileBlob: null as null|Blob
			}
		},
		name: "x-qr-u",
		props: {
		  width:{
		  	type:Number,
		  	default:300
		  },
		  height:{
		  	type:Number,
		  	default:300
		  },
		  /**
		   * 留白内边距
		   */
		  margin:{
		  	type:Number,
		  	default:2
		  },
		  /**
		   * 前景色
		   */
		  foregroundColor:{
		  	type:String,
		  	default:'#000000'
		  },
		  /**
		   * 背景景色
		   */
		  backGroundColor:{
		  	type:String,
		  	default:'#FFFFFF'
		  },
		  /**
		   * 码的内容
		   */
		  content:{
		  	type:String,
		  	default:'https://xui.tmui.design'
		  },
			/**
			 * logo图片地址,请使用静态
			 */
			logo: {
				type: String,
				default: ""
			},
			/**
			 * 是否是圆点
			 */
			dotRound: {
				type: Boolean,
				default: true
			}
		},
		watch: {
		  "content": {
		    /**
		     * 这里监听属性变化，并进行组件内部更新
		     */
		    handler(newValue : String, oldValue : String) {
		      let t = this;
		      t.qrCode()
		    },
		    /**
		     * 创建时是否通过此方法更新属性，默认值为false
		     */
		    immediate: true
		  },
		},
		NVLoad() : HTMLElement {
			return document.createElement("div") as HTMLElement
		},
		NVLayouted() {
			let t = this;
			t.qrCode()
		},
		NVBeforeUnload() {
		},
		methods: {
			qrCode() {
				let t = this;
				let scr = document.createElement("script")
			
				scr.src = "/static/qrious.min.js"
				scr.id = "xQrUScr"
			
				scr.onload = function () {
			
					scanning()
				}
				let srcid = document.getElementById("xQrUScr")
				if (!srcid) {
					document.head.appendChild(scr)
				} else {
					setTimeout(function() {
						scanning()
					}, 100);
				}
				let logo = this.logo
				function scanning() {
					let parentView = document.getElementById(t.id)as HTMLElement
					parentView.innerHTML = ""
					
					let canvas = document.createElement("canvas") as HTMLCanvasElement
					if (!canvas) {
						return
					}
					parentView.appendChild(canvas)
					let text = t.content
					let size = t.width || 128;
					let padding = t.margin || 2
					QRCode.toCanvas(canvas, text || 'xui', {
						element: canvas[0],
						width: size,
						errorCorrectionLevel: 'H',
						margin: padding,
						color: {
							dark: t.foregroundColor || "black",
							light: t.backGroundColor || "white"
						}
					})
					if (logo) {
						let ctx = canvas.getContext("2d")!;
						let img = new Image();
						let logoSize = size*0.25
						img.width = logoSize + "px"
						img.height = logoSize + "px"
						img.src = logo
						img.onload = function() {
							let x = (size - logoSize) / 2
							let y = x;
							ctx.drawImage(img, x, y, logoSize, logoSize)
							canvas.toBlob((blob:Blob|null)=>{
								t.fileBlob = blob
							})
						}
					}else{
						canvas.toBlob((blob:Blob|null)=>{
							t.fileBlob = blob
						})
					}
				}

			},
			getQrcodePath():Blob|null {
				return this.fileBlob
			}


		}
	}
</script>